<template>
    <!-- author：jiayi zhu
     date: 2018-3-23
     describe：设备信息-->
    <div class="control">
        <!-- 查询设备 -->
        <!-- <el-form :inline="true" ref="searchForm" :model="searchForm" class="demo-form-inline searchForm">
            <div>
	            <el-form-item label="设备名称：">
                    <el-input v-model="searchForm.name"></el-input>
                </el-form-item>
                <el-form-item label="设备编号：">
                    <el-input v-model="searchForm.number"></el-input>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" plain @click="queryAlarm()">查询</el-button>
                <el-button type="primary" plain @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
 -->
        <!-- 设备表格 -->
        <div class="dataTable" :style="{'height':dataHei}">
            <!-- <div class="modify">
                <el-button type="primary" plain @click="bindShow=true">绑定</el-button>
            </div> -->
            <!-- 引入的table组件 -->
            <jn-tablemanage 
                v-loading="loading"
                element-loading-text="拼命加载中"
                :tableData="equipmentData" 
                :tableConfig="tableConfig"
                v-on:handleClick="handleClick">
            </jn-tablemanage>

            <el-dialog
              title="绑定"
              :visible.sync="bindShow"
              width="40%"
              :before-close="handleClose">
                <el-form ref="bindForm" :model="bindForm" label-width="100px">
                    <el-form-item label="设备类型：">
                        <el-select v-model="bindForm.type" placeholder="请选择设备类型">
                          <el-option label="土壤传感器" value="1"></el-option>
                          <el-option label="其他传感器" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="重命名：">
                        <el-input v-model="bindForm.name"></el-input>
                    </el-form-item>
                </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="equipmentBindApi()">确 定</el-button>
              </span>
            </el-dialog>
        </div>     
    </div>
</template>

<script>
import "@/assets/css/common.css"
import jnTablemanage from '@/components/tableComponent.vue'
import {setCookie,getCookie,delCookie} from '@/tools/cookie'

export default {
    name: 'equipmentBind',
        data () {
        return {
            obj:{
                pageBean:{
                    sortRule:"",
                    sortValue:"",
                    page:1,
                    pageSize:13
                },
                dataBean:{
                }
            },

            searchForm:{
                name:'',
                number:''
            },

            bindForm:{
                type:'',
                name:'',
                sid:''
            },

            equipmentTypeList:[],

            tableConfig: {
                // heightConfig:500,
                // ***操作选项的宽度
                handleWidth:150,
                //   ***ifSelected是否可多选 必传
                ifSelected:false,
                //   ***ifIndex是否有序号 必传
                ifIndex: true,
                //   ***ifHandle是否有操作项 必传
                ifHandle: true,
                // ***ifPagination是否需要分页栏 必传
                ifPagination:false,
                //   ***titleData: 表头的值 prop：指当列在userData的key; label:指当列的表头的值；width:当列的宽 必传
                titleData:[ {
		            prop: "sensor_num",
		            label: "传感器编号",
		            // width: "300"
		          },
                  {
                    prop: "type",
                    label: "类型",
                    // width: "250"
                  },
                  {
                    prop: "name",
                    label: "命名",
                    // width: "300"
                  }],
                //   ***handleData: 有操作按钮的需要传入的值；当ifHandle为true时必传
                //   ***key：该按钮的代表值,用来区分点击了哪个按钮；
                //   ***btnName:该按钮的显示值；
                //   ***btnIcon:该按钮的icon的class
            handleData: [ {
                    key: 'refresh',
                    btnName: '绑定',
                    btn:true,
                    btnIcon: 'el-icon-refresh',
                },{
                    key: 'delete',
                    btnName: '删除',
                    btn:true,
                    btnIcon: 'el-icon-delete',
                }],
            },

        //  ***分页相关值，得传入
            // pagiData:{
            //     currentPage:1,
            //     pageSizes:[13,26,39] ,
            //     pageSize:10,
            //     total:20
            // },

            equipmentData: [],
            loading:false,
            bindShow:false
        }
    },
    methods: {
        handleClose(){
            this.bindShow=false
        },
        handleClick(data,key){
            if(key=='refresh'){
                this.bindShow=true
                this.bindForm=data
                this.bindForm.sid=data.sensor_num
                this.bindForm.type=data.type.toString()
            }else if(key=='delete'){
                this.$confirm('此操作将永久删除该节点, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    var vm=this
                    $.ajax({
                        url: "http://by.gole.site/api/sensor/del",
                        type: 'POST',
                        async:false,
                        data: JSON.stringify({
                            token:getCookie('token'),
                            sid:data.sensor_num
                        }),
                    }).done(function(res) {
                        if(res.status==0){
                            vm.$message({
                              message:res.msg,
                              type: 'warning'
                            });
                        }else{
                            vm.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vm.equipmentDataApi();
                        }
                    }).fail(function(res) {
                        vm.$notify.error({
                          message: '数据请求失败！'
                        });
                    });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            }
        },
        equipmentDataApi(){
            var vm=this
            $.ajax({
                url: "http://by.gole.site/api/sensor/get",
                type: 'POST',
                async:false,
                data: JSON.stringify({
                    token:getCookie('token')
                }),
            }).done(function(res) {
                if(res.status==0){
                    vm.$message({
                      message:res.msg,
                      type: 'warning'
                    });
                }else{
                    vm.equipmentData=res.data
                }
            }).fail(function(res) {
                vm.$notify.error({
                  message: '数据请求失败！'
                });
            });
        },
        equipmentBindApi(){
            var vm=this
            console.log(this.bindForm)
            $.ajax({
                url: "http://by.gole.site/api/sensor/edit",
                type: 'POST',
                async:false,
                data: JSON.stringify({
                    token:getCookie('token'),
                    sid:vm.bindForm.sid,
                    rename:vm.bindForm.name,
                    type:vm.bindForm.type
                }),
            }).done(function(res) {
                if(res.status==0){
                    vm.$message({
                      message:res.msg,
                      type: 'warning'
                    });
                }else{
                    vm.bindShow=false
                    vm.$message({
                      message: '修改成功！',
                      type: 'success'
                    });
                    vm.equipmentDataApi();
                }
            }).fail(function(res) {
                vm.$notify.error({
                  message: '数据请求失败！'
                });
            });
        }
    },
    mounted(){
        this.equipmentDataApi();
        if(getCookie('level')!=2){
            window.history.back(-1);
        }
    },
    components:{
      jnTablemanage
    },
    computed:{
        dataHei:function(){
          var dataHei=(document.documentElement.clientHeight-120)+'px'
          return dataHei
        },
    }
}
</script>

<style>
.el-dialog__body{
    max-height:560px !important;
    overflow: auto !important;
}
.el-upload--picture-card{
    width:60px !important;
    height:60px !important;
    line-height: 60px !important;
}
</style>